<template>
	<view>
		<u-loading-page :loading="show" loading-text="加载中..."></u-loading-page>
		<view class="u-wrap" v-if="!show">
			<view class="u-menu-wrap">
				<scroll-view
					scroll-y
					scroll-with-animation
					class="u-tab-view menu-scroll-view"
					:scroll-top="scrollTop"
				>
					<view
						v-for="(item, index) in tabbar"
						:key="index"
						class="u-tab-item"
						:class="[current == index ? 'u-tab-item-active' : '']"
						:data-current="index"
						@tap.stop="swichMenu(index)"
					>
						<text class="u-line-1">
							{{ language == 'zh' ? item.name : item.name_copy ? item.name_copy : item.name }}
						</text>
					</view>
					<view :style="{ height: footerHight + 'px' }" class="height"></view>
				</scroll-view>
				<block v-for="(item, index) in tabbar" :key="index">
					<scroll-view scroll-y v-if="current == index">
						<view class="page-view" v-if="item.goods.length > 0">
							<view class="item" v-for="(e, eIndex) in item.goods" :key="eIndex">
								<image :src="e.image" mode="aspectFill"></image>
								<view>
									<u--text
										:text="language == 'zh' ? e.title : e.title_copy ? e.title_copy : e.title"
										bold
										color="#141414"
										size="16"
										lines="1"
										margin="0 0 5px 0"
									></u--text>
									<u--text
										:text="'月售' + e.sales || 0"
										color="#989898"
										size="12"
										lines="1"
										margin="0 0 10px 0"
									></u--text>
									<view class="item_price">
										<text>￥{{ e.price || 0 }}</text>
										<u-number-box
											v-model="e.number"
											:name="e.id"
											disabledInput
											:showMinus="e.number > 0"
											min="0"
											@change="valChange($event, index, eIndex)"
										></u-number-box>
									</view>
								</view>
							</view>
							<view :style="{ height: footerHight + 'px' }"></view>
						</view>
						<view class="empty" v-else>
							<u-empty mode="data" :icon="imgUrl + 'empty_1.png'"></u-empty>
						</view>
					</scroll-view>
				</block>
			</view>
			<view class="footer">
				<view class="footer_btn">
					<view class="btn_left flex" @click="goPopup">
						<view class="image">
							<u-badge
								type="warning"
								max="99"
								:value="selectedLength"
								absolute
								:offset="[0, -5]"
								bgColor="#FF6500"
							></u-badge>
							<image :src="imgUrl + 'shop.png'" mode=""></image>
						</view>
						<view class="price">
							<text>￥</text>
							<text class="price_text">{{ sumPrice || 0 }}</text>
						</view>
					</view>
					<view class="btn_right" @click="placeOrder">确认下单</view>
				</view>
				<view class="safe_height_bottom"></view>
			</view>
		</view>

		<u-popup
			:show="popupShow"
			@close="popupShow = false"
			mode="bottom"
			:safeAreaInsetBottom="false"
			:round="10"
		>
			<view class="popopBox" :style="{ height: popupHeight + 'px' }">
				<scroll-view
					class="selectedList"
					:style="{ height: Math.floor(popupHeight - footerHight - 25) + 'px' }"
					scroll-y
				>
					<view v-for="(item, index) in selected" :key="index">
						<view class="item" v-if="item.number != 0">
							<image :src="item.image" mode="aspectFill"></image>
							<view>
								<u--text
									:text="item.title"
									bold
									color="#141414"
									size="16"
									lines="1"
									margin="0 0 5px 0"
								/>
								<u--text
									:text="'月售' + item.sales || 0"
									color="#989898"
									size="12"
									lines="1"
									margin="0 0 10px 0"
								></u--text>
								<view class="item_price">
									<text>￥{{ item.price || 0 }}</text>
									<u-number-box
										v-model="item.number"
										:name="item.id"
										disabledInput
										:showMinus="item.number > 0"
										min="0"
										@change="selectedChange($event, index)"
									></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view :style="{ height: footerHight + 'px' }"></view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrl: this.$IMAGE_URL,
			box_id: '',
			shop_id: 0,
			reserve_id: 0,
			table_num: 0,
			show: true,
			tabbar: [],
			popupShow: false, //菜单弹窗
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			footerHight: 0,
			selected: [], //已选菜单
			popupHeight: 0
		};
	},
	onLoad(event) {
		this.shop_id = event.shop_id; //店铺id
		this.reserve_id = event.reserve_id; //预约订单id
		this.box_id = event.id; //桌子的id
		this.table_num = event.table_num; //桌子的id
		console.log(this.shop_id, '店铺id');
		console.log(this.reserve_id, '预约订单id');
		console.log(this.box_id, '桌子的id');
		console.log(this.table_num, 'this.table_num');
		console.log(event);
		this.getMenu();
	},
	computed: {
		language() {
			return this._i18n.locale;
		},
		sumPrice() {
			return this.selected.reduce((pre, cur) => {
				return pre + cur.number * Number(cur.price);
			}, 0);
		},
		selectedLength() {
			return this.selected.reduce((pre, cur) => {
				return pre + cur.number * 1;
			}, 0);
		}
	},
	onReady() {
		// 设置弹窗高度
		this.popupHeight = uni.$u.sys().windowHeight * 0.6;
	},
	methods: {
		getMenu() {
			this.$http
				.post('wanlshop/shop/shopInfo', {
					shop_id: this.shop_id,
					reserve_id: this.reserve_id,
					table_num: this.table_num
				})
				.then(res => {
					if (res.code == 1) {
						this.show = false;
						res.data.category.forEach(item => {
							item.goods = item.goods.map(e => ({
								pid: item.id,
								number: 0,
								...e
							}));
						});
						this.tabbar = res.data.category;
					}
				});
		},
		valChange(e, index, eIndex) {
			let activeIndex = this.selected.findIndex(item => item.id == e.name);
			if (e.value > 0) {
				if (activeIndex == -1) {
					let obj = {
						title: this.tabbar[index].goods[eIndex].title,
						image: this.tabbar[index].goods[eIndex].image,
						sales: this.tabbar[index].goods[eIndex].sales,
						price: this.tabbar[index].goods[eIndex].price,
						number: e.value,
						pid: this.tabbar[index].goods[eIndex].pid,
						id: this.tabbar[index].goods[eIndex].id
					};
					this.selected.push(obj);
				} else {
					this.selected[activeIndex].number = e.value;
				}
			} else {
				this.selected.splice(activeIndex, 1);
			}
		},
		selectedChange(e, index) {
			let activeIndex = this.selected.findIndex(item => item.id == e.name);
			let id = this.selected[index].id;
			let pid = this.selected[index].pid;
			let indexId = this.tabbar.findIndex(item => item.id == pid);
			let indexPid = this.tabbar[indexId].goods.findIndex(item => item.id == id);
			if (e.value > 0) {
				this.tabbar[indexId].goods[indexPid].number = e.value;
			} else {
				this.tabbar[indexId].goods[indexPid].number = 0;
				this.selected[activeIndex].number = 0;
				this.popupShow = !this.selected.every(item => item.number == 0);
			}
		},
		placeOrder() {
			let goods_ids = [];
			this.selected.forEach(item => {
				if (item.number > 0) {
					let obj = {
						id: item.id,
						num: item.number
					};
					goods_ids.push(obj);
				}
			});
			if (goods_ids.length == 0) {
				uni.$u.toast('请下单商品');
				return;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$http
				.post('wanlshop/order/addUserOrder', {
					shop_id: this.shop_id,
					box_id: this.box_id || this.table_num,
					goods_ids,
					type: 'shop'
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let that = this;
						uni.$emit('uploadList');
						setTimeout(() => {
							that.$refs.uToast.show({
								type: 'default',
								message: '下单成功',
								duration: 1000,
								complete() {
									uni.$u.route({
										type: 'redirectTo',
										url: 'pagesA/my/merchantOrder',
										params: {
											current: 2
										}
									});
								}
							});
						}, 150);
					}
				});
		},
		goPopup() {
			let status = this.selected.every(item => item.number == 0);
			if (status) {
				return;
			}
			this.popupShow = true;
		},
		getElInfo() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.footer')
				.boundingClientRect(data => {
					if (!data) {
						setTimeout(() => {
							this.getElInfo();
						}, 10);
						return;
					}
					this.footerHight = data.height;
				})
				.exec();
		},
		// 点击左边的栏目切换
		async swichMenu(index) {
			if (index == this.current) return;
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields(
						{
							size: true
						},
						res => {
							// 如果节点尚未生成，res值为null，循环调用执行
							if (!res) {
								setTimeout(() => {
									this.getElRect(elClass);
								}, 10);
								return;
							}
							this[dataVal] = res.height;
						}
					)
					.exec();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.u-line-1 {
	display: -webkit-box;

	-webkit-line-clamp: 1;

	-webkit-box-orient: vertical;

	overflow: hidden;
}
.empty {
	height: 500rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/deep/.u-number-box__minus {
	border-radius: 50% !important;
	background-color: #fff !important;
	border: 2rpx solid #ffbf00;
	width: 40rpx !important;
	height: 40rpx !important;
	box-sizing: border-box;
}

/deep/.u-number-box__plus {
	border-radius: 50% !important;
	background-color: #ffbf00 !important;
	width: 40rpx !important;
	height: 40rpx !important;
}

/deep/.u-number-box__input {
	background-color: #fff !important;
}

/deep/.u-icon__icon {
	font-size: 22rpx !important;
}

.u-wrap {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
}

.height {
	background-color: #f8f8f8;
}

.popopBox {
	padding: 50rpx 50rpx 0 50rpx;
	box-sizing: border-box;
}

.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;

	.u-tab-view {
		width: 200rpx;
		height: 100%;
		background: #f6f6f6;

		.u-tab-item {
			height: 110rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #444;
			font-weight: 400;
			line-height: 1;
		}

		.u-tab-item-active {
			position: relative;
			color: #000;
			font-size: 28rpx;
			font-weight: 600;
			background: #fff;
		}
	}

	.page-view {
		padding: 23rpx;
	}
}

.item {
	display: grid;
	grid-template-columns: 150rpx auto;
	grid-column-gap: 20rpx;
	margin-bottom: 40rpx;

	image {
		height: 146rpx;
		border-radius: 14rpx;
		width: 100%;
	}

	.item_price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fc4a31;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	border-top-left-radius: 35rpx;
	border-top-right-radius: 35rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	z-index: 10080;

	.footer_btn {
		border-radius: 65rpx;
		overflow: hidden;
		display: grid;
		grid-template-columns: 1fr 1.3fr;
		height: 100rpx;

		.btn_left {
			background-color: #000;
			color: #fff;
			padding: 10rpx 36rpx;
			box-sizing: border-box;

			.image {
				width: 89rpx;
				height: 83rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.price {
				display: flex;
				margin-left: 20rpx;

				text {
					color: #ffffff;
					font-size: 28rpx;
				}

				.price_text {
					font-size: 42rpx;
					font-weight: bold;
				}
			}
		}

		.btn_right {
			background-color: #ffc100;
			color: #231916;
			font-size: 32rpx;
			display: flex;
			font-weight: bold;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
